{% extends "djips/common/base.html" %}
{% load i18n %}

{% block title %}
{% trans "Manage installed categories" %}
{% endblock %}

{% block externalref %}
    <!-- Farbastic - color picker (http://acko.net/dev/farbtastic) -->
    <script type="text/javascript"
            src="{{media_url}}djips/js/farbtastic/farbtastic.js"></script>
    <link rel="stylesheet"
          type="text/css" 
          href="{{media_url}}djips/js/farbtastic/farbtastic.css" />

    <script type="text/javascript"
            src="{{media_url}}djips/js/admin_color.js"></script>

{% endblock %}

{% block content %}

{% if update_errors %}
  <p class="error_msg">{% trans "Errors have been found while trying to save
  categories, correct them before submitting" %}.</p>
{% endif %}

{% if add_errors %}
  <p class="error_msg">{% trans "Errors have been found while trying to add the
  new category, correct them before submitting." %}</p>
{% endif %}

{% if success %}
  <p class="info_msg">{% trans "Categories have been saved." %}</p>
{% endif %}

{% if deleted %}
  <p class="info_msg">{% blocktrans %}Category '{{deleted}}' has been deleted.{% endblocktrans %}
</p>
{% endif %}


<form name="update_colors"
      id="update_colors_form"
      action="{{admin_base_url}}/djips_common/colors/"
      method="POST">
  <div id="picker">
  </div>
  <table class="listing">
    <thead>
      <tr>
	<th>{% trans "Color" %}</th>
	<th>{% trans "Name" %}</th>
	<th>{% trans "Delete" %}</th>
      </tr>
    </thead>
    <tbody>
      {% for color in values %}
      <tr class="{% if forloop.counter|divisibleby:2 %}even{% else  %}odd{% endif %}"
          id="tr_color_{{color.id}}">
	<td>
	  {% if color.invalid_value %}
	  <p class="error_msg">{% trans "This color is invalid (6 characters in
      0123456789ABCDEF)." %}</p>
	  {% endif %}
	  <span class="color_form_dash">#</span>
	  <input type="text"
          	  class="djips_color" 
	          name="value_{{color.id}}"
         	  id="value_{{color.id}}"
	          value="{{color.value}}" />
	</td>
	<td>
	  {% if color.empty_name %}
	  <p class="error_msg">{% trans "Name can not be empty." %}</p>
	  {% endif %}

	  {% if color.too_long_name %}
	  <p class="error_msg">{% trans "This name is too long (100
	  characters maximum)." %}</p>
	  {% endif %}
	  <input type="text"
	         name="name_{{color.id}}"
	         value="{{color.name}}" />
	</td>
	<td>
          <p class="center">
	   <a class="delete_color_link"
	      id="delete_color_link_{{color.id}}"
	      href="{{admin_base_url}}/djips_common/colors/delete/{{color.id}}/">
	     <img src="{{media_url}}/djips/images/delete.gif" alt="delete" />
           </a>
	  </p>
	</td>
      </tr>
      {% endfor %}
      <tr class="separator">
	<td colspan="3">{% trans "Add new category" %}</td>
      </tr>
      <tr>
	<td>
	  {% if new.invalid_value %}
	  <p class="error_msg">{% trans "This color is invalid (6 characters in
      0123456789ABCDEF)." %}</p>
	  {% endif %}
	  <span class="color_form_dash">#</span>
	  <input type="text"
          	  class="djips_color"
	          id="new_value"
         	  name="new_value"
	          value="{{new.value}}" />
	</td>
	<td>
	  {% if new.empty_name %}
	  <p class="error_msg">{% trans "Name can not be empty." %}</p>
	  {% endif %}

	  {% if new.too_long_name %}
	  <p class="error_msg">{% trans "This name is too long (100 characters
	  maximum)." %}</p>
	  {% endif %}
	  <input type="text"
	         name="new_name"
	         value="{{new.name}}" />
	</td>
	<td></td>
      </tr>
    </tbody>
  </table>

  <div class="center">
   <input type="submit"
          class="valid"
          name="save"
          value="{% trans "Update categories" %}"/>
   <input type="submit"
          class="cancel"
          name="cancel"
          value="{% trans "Cancel" %}"/>
  </div>

</form>
{% endblock%}
